* {
    margin: 0;
    padding: 0;
}

/* 属性 font-family 列举一个或多个由逗号隔开的字体族，其中第一个是 <family-name>，第二个是 <generic-name> */
body {
    font-family: "Microsoft Yahei", sans-serif;
}

header {
    /* 字体粗细程度 */
    font-weight: lighter;
    /* 背景图片 */
    background-image: url(img/bg1.jpg);
    /* 颜色 */
    color: #fff;
    /* 宽度 */
    width: 100%;
    /* 高度 */
    height: 900px;
    /* 字体对齐：居中对齐 */
    text-align: center;
    /* 外边距 */
    margin: 0 auto;
}

.title {
    /* 此元素会被显示为行内块元素 */
    display: inline-block;
    /* 设置此元素的上外边距为160px*/
    margin-top: 160px;
    /* 设置尺寸64px */
    font-size: 64px;
    /* 设计字体粗细700*/
    font-weight: 700;
}

.passages {
    /* 设置内边距上下100px 左右为25% */
    padding: 100px 25%;
     /* 设置尺寸20px*/
    font-size: 20px;
    color: #fefefe;
     /* 设计字体粗细500*/
    font-weight: 500;
}

.login {
    /* 此元素会被显示为行内块元素 */
    display: inline-block;
    /* 宽度65% */
    width: 65%;
    /* 设置边框宽度为1px 为实线 颜色 */
    border: 1px solid aliceblue;
    /* 设置内边距上80px,右30px 下100px 左30px */
    padding: 80px 30px 100px 30px;
    /* 背景颜色 */
    background-color: rgba(243, 243, 243, 0.4);
}

.login div:first-child {
    color: #fff;
    /* 设置尺寸22px */
    font-size: 22px;
    /* 字体粗细400 */
    font-weight: 400;
    /* 设置元素的下外边距30px */
    margin-bottom: 30px;
}


.login div input[type=text] {
    width: 25%;
    height: 30px;
    /* 设置边框宽度为1px 为实线 颜色 */
    border: 1px solid rgb(53, 215, 255, 0.5);
    /* 背景颜色 */
    background: rgba(255, 255, 255, 0.5);
    /* 设置内边距均为7px */
    padding: 7px;
}

.login div input[type=text]:focus {
    /* 设置四个边框的宽度为0px */
    outline: 0px;
    /* 设置边框宽度为1px 为实线 颜色 */
    border: 1px solid #329bfd;
}

.login div button {  
    /* 设置鼠标放在元素范围内时的光标 */
    cursor: pointer;  
    width: 10%;
    height: 46px;
    background-color: #4CAF50;
    color: #fff;
    /* 边框样式为none */
    border: none;
    /* 设置元素的左外边距为5px */
    margin-left: 5px;
    /* 此元素的顶端与最高元素顶端对齐*/
    vertical-align: top;
}

.login div button:hover{
    background-color: #11a016;
}


section {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    /*border-bottom: 2px solid rgb(200, 200, 200);*/
}

.second {
    height: 700px;
    /*  */
    padding-bottom: 100px;
}

.second>div:nth-child(1) {
    /* 此元素会被显示为行内块元素 */
    display: inline-block;
    /* 设置此元素的上外边距为120px */
    margin-top: 120px;
}

.second>div:nth-child(2) {
    /* 设置此元素的上外边距60px */
    margin-top: 60px;
    font-size: 48px;
    height: 170px;
    /* 字体粗细程度 */
    font-weight: lighter;
}

.in {
    width: 80%;
    height: 450px;
    margin: 0px auto;
    /* 设置此元素的上外边距60px */
    margin-top: 50px;
}

.in div {
    width: 50%;
    height: 120px;
    /* 字体对齐方式：左对齐 */
    text-align: left;
    /* 下内边框距20px */
    padding-bottom: 20px;
}

.phone,
.pencil {
    /* 向左浮动*/
    float: left;
}

.check,
.setting {
    /* 向右浮动 */
    float: right;
}

.info div img {
    /* 设为块级元素 */
    display: block;
    float: left;
    padding: 0 15px 80px 20px;
}

.info div h1 {
      /* 下内边框距10px */
    padding-bottom: 10px;
}

.third {
    height: 750px;
    background-image: url(img/bg2.png);
    text-align: left;
    color: white;
    /* 字体宽度 */
    font-weight: lighter;
}

.supportive {
    width: 32%;
    height: 430px;
    /* 向左浮动 */
    float: left;
    /* 设置内边距上150px 右，下0 左50% */
    padding: 150px 0 0 10%;
}

.supportive h1 {
    font-size: 40px;
    font-weight: lighter;
}

.supportive p {
    font-size: 18px;
    color: black;
}

.supportive button {
    background: rgba(0, 0, 0, 0);
    color: white;
    /*  设置鼠标放在元素范围内时的光标 */
    cursor: pointer;
    width: 50%;
    height: 50px;
    text-align: center;
    margin-bottom: 10px;
    /*元素添加圆角边框  */
    border-radius: 5px;
    /* 设置边框宽度为1px 为实线 颜色 */
    border: 1px solid black;
}

.supportive button:hover {
    color: #000;
    background: rgba(253, 253, 253, 0.5);
}

.ipad {
    width: 40%;
    height: 100%;
    /* 向右浮动 */
    float: right;
    margin-top: 75px;
}

.ipad img {
    width: 100%;
}

.fourth {
    width: 100%;
    height: 1000px;
}

.crew>div:nth-child(1) {
    /* 上内边距50px */
    padding-top: 50px;
    font-size: 40px;
    /* 字体粗细程度 */
    font-weight: lighter;
}

.crew>div:nth-child(3) {
    width: 30%;
    /* 下内边距30px */
    padding-bottom: 30PX;
    margin: 0 auto;
    font-weight: lighter;
}

.crewphoto {
    width: 50%;
    height: 500px;
    margin: 0 auto;
}

.img_div {
    width: 40%;
    /* 相对定位 */
    position: relative;
    /* 左浮动 */
    float: left;
    margin: 5%;
}

.who {
    width: 100%;
}

.mask {
    background-image: url(img/mask.png);
    width: 100%;
    height: 100%;
    /* 绝对定位 */
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    /* 元素不透明级别 */
    opacity: 0;
}

.mask h1 {
    font-weight: bold;
    /* 上内边距10% */
    padding-top: 10%;
}

.mask p {
    font-weight: lighter;
    padding-top: 5%;
    color: #fff;
}

.mask img {
    /* 设置鼠标移到元素上的光标样式 */
    cursor: pointer;
    padding-top: 20%;
    height: 48px;
}

.mask:hover {
    /* 元素不透明度为1 */
    opacity: 1;
}